<template>
    <div ref="designer" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0"
        data-bind="dxReportDesigner: $data"></div>
</template>

<script setup>
import "devextreme/dist/css/dx.light.css";
import "@devexpress/analytics-core/dist/css/dx-analytics.common.css";
import "@devexpress/analytics-core/dist/css/dx-analytics.light.css";
import "@devexpress/analytics-core/dist/css/dx-querybuilder.css";
import "devexpress-reporting/dist/css/dx-webdocumentviewer.css";
import "devexpress-reporting/dist/css/dx-reportdesigner.css";
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router'
import ko from 'knockout'
import 'devexpress-reporting/dx-reportdesigner'
import analyHans from '@/assets/dx-analytics-core.zh-Hans.json'
import reportHans from '@/assets/dx-reporting.zh-Hans.json'

const designer = ref()
const router = useRoute()

onMounted(() => {
    let reportUrl = router.query?.reportUrl;
    if (!reportUrl)
        reportUrl = 'TestReport';
    console.log("地址1:" + import.meta.env.VITE_APP_BASE_API + reportUrl);
    const designerOptions = {
        reportUrl: ko.observable(reportUrl), // The URL of a report that is opened in the Report Designer when the application starts.
        requestOptions: {
            //host: config.host,
            host: import.meta.env.VITE_APP_BASE_API,//'http://localhost:5000/',
            getDesignerModelAction: 'DXXRD/GetDesignerModel',
        },
        callbacks: {
            CustomizeLocalization: function (s, e) {
                e.LoadMessages(analyHans)
                e.LoadMessages(reportHans)
            },
        },
    }
    ko.applyBindings(designerOptions, designer.value)
})

onBeforeUnmount(() => {
    ko.cleanNode(designer.value)
})
</script>
